<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            display: flex;
        }

        .b {
            width: 50%;
            font-size: 20px;
            border: 1px solid #ccc;
            text-align: center;
        }

        .c {
            text-align: center;
        }

        .d {
            width: 400px;
        }

        .router-link-active {
            background-color: pink;
        }


        .v-enter,.v-leave-to {
            opacity: 0;
        }

        .v-enter-active,.v-leave-active {
            transition: all 2s;
        }

        .v-leave-active {
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="a">
            <router-link to="/mymsg" tag="div" class="b">个人基本情况</router-link>
            <router-link to="/heart" tag="div" class="b">心动女生</router-link>
        </div>

        <router-view class="c"></router-view>
    </div>
    <template id="mymsgs">
        <div>
            <h1>个人信息</h1>
            <div>我叫王申奥，性别男，爱好美女</div>
        </div>
    </template>
    <template id="Mygirl">
        <div>
            <h1>谁能百里挑一，唯我电商王申奥</h1>
            <div>
                <router-link to="/img1">心动女神1号</router-link>
                <router-link to="/img2">心动女神2号</router-link>
            </div>
            <transition>
                <router-view class="d"></router-view>
            </transition>
        </div>
    </template>
</body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
    let mymsg = {
        template: "#mymsgs"
    }
    let heart = {
        template: "#Mygirl"
    }
    let img1 = {
        template: "<img src='./dile.jpg'>"
    }
    let img2 = {
        template: "<img src='./ruhua.jpg'>"
    }
    var routerObj = new VueRouter({
        routes: [
            { path: "/mymsg", name: "mymsg", component: mymsg },
            {
                path: "/heart", name: "heart", component: heart, children: [
                    { path: "/img1", component: img1 },
                    { path: "/img2", component: img2 }
                ]
            }
        ]
    })
    var vm = new Vue({
        el: "#app",
        router: routerObj,
    })
</script>

</html>